<template>
  <main>
    <p>选择分类</p>
    <am-list :static="true">
      <!-- 主分类 -->
      <am-list-item v-for="(tagMain, index) in localTags" :key="index" v-if="tagMain.main.isShow">
        {{ tagMain.main.name }}：
        <!-- 子分类 -->
        <a :class="[{ 'disabled-tag': tag.disabled }, 'tag']" href="javascript:;"
          v-for="(tag, index) in tagMain.sub" :key="index" @click="select(tagMain, tag)">
          <am-tag :color="tag.color">{{ tag.name }}</am-tag>
        </a>
      </am-list-item>
    </am-list>
  </main>
</template>

<script>
export default {
  name: 'tags',
  data() {
    return {
      selected: this.worksTags,
      localTags: this.tags
    }
  },
  computed: {
    /**选中空间的标签个数 */
    kjCounter() {
      const idx = this.localTags.findIndex(tag => tag.main.name === '空间');
      const subs = this.localTags[idx].sub;
      return subs.filter(sub => sub.color === 'primary').length;
    },

    /**
     * 全屋定制标签
     */
    whouleHouse() {
      return this.localTags.find(tag => tag.main.name === '全屋定制');
    },
    whouleHouseSub() {
      return this.whouleHouse.sub[0];
    },


    /**
     * 系列标签
     */
    series() {
      return this.localTags.find(tag => tag.main.name === '系列');
    }
  },
  methods: {
    ready() {
    },
    select(tagMain, tag) {
      /**
       * 这里设置tags的属性留意几个问题
       * 1. computed没有setter，其属性有
       * 2. 而且确定没有影响到state
       * 
       * 对tags是直接使用reduce似乎不对，还是对其下属性进行设置
       */

      if(!this.selected.includes(tag)) {
        this.selected.push(tag);
        // this.$set(tag, 'color', 'primary');
        tag.color = 'primary';

        if(!tagMain.main.isMulti) {
        // 使其它sub失效
          tagMain.sub.forEach(item => {
          if(item !== tag) {// 禁用
            // this.$set(item, 'disabled', true);
            item.disabled = true;
          }
        });
        }
      } else {
        this.selected.splice(this.selected.findIndex(t => t.id === tag.id), 1);
        tag.color = void 0;
        // 恢复所有subtabs
        tagMain.sub.forEach(item => item.disabled = false);
      }
    }
  },
  watch: {
    selected(val) {
      this.$emit('update:worksTags', val);
    },
    kjCounter(val) {
      if(val >= 2) {
        this.series.main.isMulti = true;
        // 恢复所有subtabs
        this.series.sub.forEach(item => item.disabled = false);
        this.whouleHouse.main.isShow = true;
        if(!this.selected.includes(this.whouleHouseSub)) {
          this.selected.push(this.whouleHouseSub);
        }        
      } else if(val === 0) {
        // this.series.sub.forEach(item => item.disabled = false);
      } else {
        this.series.main.isMulti = false;
        // 去掉系列全部所选
        this.series.sub.forEach(sub => {
          sub.color = void 0;
          sub.disabled = false;
        });
        this.selected = this.selected.filter(sub => !this.series.sub.includes(sub));
        this.whouleHouse.main.isShow = false;
        if(this.selected.includes(this.whouleHouseSub)) {
          this.selected = this.selected.filter(sub => sub !== this.whouleHouseSub);
        }
      }

      // this.select(this.whouleHouse, this.whouleHouse.sub[0]);
    }
  },
  props: {
    worksTags: {
      type: Array,
      default() {
        return [];
      }
    },
    tags: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  mounted() {
    this.ready();
  }
}
</script>

<style scoped>
.tag {
  display: inline-block !important;
  margin: 0 5px !important;
  padding: 0 !important;
}
.selected-tag {
  display: inline-block !important;
  margin: 5px !important;
  padding: 0 !important;
}
.disabled-tag {
  opacity: .7;
  pointer-events: none;
}
</style>
